<template>
	<view>
		<view style="padding-bottom: 120rpx;">
			<uni-section title="违约信息" type="line">
				<view class="formContainer">
					<text>{{detailInfo.ruleText}}</text>
				</view>
			</uni-section>

			<uni-section title="退款信息" type="line">
				<view class="formContainer">
					<uni-forms-item label="订单租金">
						<u--input v-model="detailInfo.rent" inputAlign="right" disabled>
						</u--input>
					</uni-forms-item>
					<uni-forms-item label="扣款金额" required>
						<u--input v-model="detailInfo.damages" type="digit" inputAlign="right" placeholder="请输入扣款金额"
							@input="changeInput">
						</u--input>
					</uni-forms-item>

					<uni-forms-item label="应退金额">
						<u--input v-model="rentToBeRefunded" inputAlign="right" placeholder="自动计算" disabled>
						</u--input>
					</uni-forms-item>


					</uni-forms>
				</view>
			</uni-section>

		</view>
		<view class="bottom" @click="confimCancle">
			<text>确定取消</text>
		</view>

	</view>
</template>

<script>
	import * as orderApi from '@/api/order-api.js';
	export default {
		data() {
			return {
				orderNo: '',
				detailInfo: {},
			}
		},
		computed: {
			rentToBeRefunded() {
				let rent = Number(this.detailInfo.rent);
				let deductionRent = Number(this.detailInfo.damages);
				return rent - deductionRent || 0
			}
		},
		onLoad(op) {
			this.orderNo = op.orderNo;
			this.getCancleDetail();
		},
		methods: {
			getCancleDetail() {
				orderApi.cancelDetail(this.orderNo).then(res => {
					this.detailInfo = res.data.liquidatedDamages;
				})
			},
			changeInput(value) {
				value = (value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
				this.$nextTick(() => {
					this.detailInfo.damages = value;
					if (Number(value) > Number(this.detailInfo.rent)) {
						this.detailInfo.damages = this.detailInfo.rent;
					}
				})

			},
			confimCancle() {
				if (uni.$u.test.isEmpty(this.detailInfo.damages)) {
					uni.$u.toast('扣除金额不能为空');
					return
				} else if (this.detailInfo.damages > this.detailInfo.rent) {
					uni.$u.toast('扣除金额不能大于缴纳租金,请重新输入');
					return
				} else {
					uni.showModal({
						title: '提示',
						content: '确认取消订单吗?',
						cancelText: '取消',
						confirmText: '确认',
						success: (res) => {
							if (res.confirm) {
								orderApi.cancelAndRefund({
									orderNo: this.orderNo,
									ruleText: this.detailInfo.ruleText,
									deductionRent: this.detailInfo.damages,
									rentToBeRefunded: this.rentToBeRefunded
								}).then(res1 => {

									uni.$u.toast('取消成功');
									uni.$emit('refreshOrder');
									uni.navigateBack({
										delta: 1
									});

								})
							}
						}
					})
				}


			}

		}
	}
</script>

<style lang="scss" scoped>
	.formContainer {
		margin: 40rpx 20rpx;
		padding: 24rpx;
		background-color: #fff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 16rpx;
	}
</style>
